<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="课程类别">
        <el-select
          v-model="searchObj.subjectParenId"
          placeholder="请选择"
          @change="changeOne"
        >
          <el-option
            v-for="list in subjectList"
            :key="list.id"
            :label="list.title"
            :value="list.id"
          ></el-option>
        </el-select>
        <el-select v-model="searchObj.subjectId" placeholder="请选择">
          <el-option
            v-for="list in subjectTwoList"
            :key="list.id"
            :label="list.title"
            :value="list.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程标题">
        <el-input v-model="searchObj.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchObj.teacherId">
          <el-option
            v-for="teacher in teacherList"
            :value="teacher.id"
            :key="teacher.id"
            :label="teacher.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 50px">
        <el-button type="primary" icon="el-icon-search" @click="fetchData()"
          >查询</el-button
        >
        <el-button type="info" icon="el-icon-remove" @click="resetData"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" border stripe row-class-name="myclassList">
      <el-table-column label="#" width="50">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="封面" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="scope.row.title" width="100%" />
        </template>
      </el-table-column>
      <el-table-column label="课程信息" width="250">
        <template slot-scope="scope">
          <a href="">{{ scope.row.title }}</a>
          <p>
            分类：{{ scope.row.subjectParentTitle }} >
            {{ scope.row.subjectTitle }}
          </p>
          <p>
            课时：{{ scope.row.lessonNum }}/ 浏览：{{ scope.row.viewCount }}/
            付费学员：{{ scope.row.buyCount }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="讲师" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.teacherName }}
        </template>
      </el-table-column>
      <el-table-column label="价格（元）" width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="Number(scope.row.price) === 0" type="success"
            >免费</el-tag
          >
          <el-tag v-else type="success">{{ scope.row.price }}元</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="status" width="150" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'Draft' ? 'warning' : 'success'">
            {{ scope.row.status === "Draft" ? "未发布" : "已发布" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
       <template slot-scope="scope">
         <router-link :to="'/course/info/'+scope.row.id">
         <el-button type="success" icon="el-icon-edit">编辑</el-button>
         </router-link>
        <el-button type="danger" icon="el-icon-delete">删除</el-button>
       </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="handlerCurrentChange"
        @size-change="changePageSize"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[5, 10, 20]"
        layout="sizes,prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import courseApi from "@/api/course";
import teacherApi from "@/api/teacher";
import subjectApi from "@/api/subject";
export default {
  data() {
    return {
      list: [], //数据
      total: 10, //总数
      page: 1,
      limit: 5,
      searchObj: {
        subjectId:'',
        subjectParenId:''
      },
      teacherList: {}, //讲师列表
      subjectList: {}, //一级分类
      subjectTwoList: {},
      removeIds: [], //批量删除id
    };
  },
  created() {
    this.fetchData(); //表单数据
    this.initSubjectList(); //课程信息
    this.initTeacher(); //教师信息
  },
  methods: {
    fetchData() {
      courseApi
        .gepageList(this.page, this.limit, this.searchObj)
        .then((res) => {
          this.list = res.data.rows;
          this.total = res.data.total;
        });
    },
    resetData() {
      this.searchObj={},
      this.subjectTwoList=[],
      this.fetchData();
    },
    initTeacher() {
      teacherApi.list().then((res) => {
        this.teacherList = res.data.items;
      });
    },
    initSubjectList() {
      subjectApi.subjectList().then((res) => {
        this.subjectList = res.data.item;
      });
    },
    changePageSize(size) {
      this.limit = size;
      this.fetchData();
    },
    changeOne(value) {
      this.subjectList.forEach((element) => {
        this.subjectTwoList = element.children;
      });
    },
    handlerCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
  },
};
</script>
<style>
.page {
  text-align: center;
  margin-top: 30px;
}
</style>